<template>
  <div class="head-title login">
    <div class="note-icon">
      <van-nav-bar left-text="返回" left-arrow fixed @click-left="onClickLeft" />
      <img :src="Icon_logo_url" class="iconlogo" />
    </div>

    <van-tabs @click="onClick">
      <van-tab title="登录">
        <van-cell-group>
          <van-field
            v-model="username"
            required
            clearable
            placeholder="请输入用户名"
            @click-right-icon="$toast('用户名不可为空')"
            :error-message="errorMessage.username"
          />
          <van-field
            v-model="password"
            :type="type"
            placeholder="请输入密码"
            required
            @click-right-icon="changeIcon() "
            :error-message="errorMessage.password"
          />
          <!-- <van-field
            v-model="vipPassword"
            :type="type"
            placeholder="请再次輸入密码"
            required
            @click-right-icon="changeIcon() "
            :error-message="errorMessage.password"
          /> -->
        </van-cell-group>
      </van-tab>
      <van-tab title="快捷登录">
        <van-field  v-model="telphone" center clearable  placeholder="请输入手机号码">
          <template #button>
            <van-button  size="small" type="primary"  @click="sendSMS()" > 发送验证码 </van-button>
          </template>
        </van-field>
        <van-field  v-model="SMS"  center  clearable  placeholder="请输入短信验证码"></van-field>
      </van-tab>
    </van-tabs>

    <div class="note-footer">
      <van-button
        type="primary"
        size="small"
        color="#99CC99"
        @click="save"
        class="AddBtn"
        :disabled="this.username === null  ||  this.password === null"
      >
      登录
      </van-button>
    </div>

    <div class="note-footer">
       <van-divider class="CreateAccount" @click="register()">注册</van-divider>
    </div>
  </div>
</template>

<script>

// import crypto from 'crypto'
import md5 from "js-md5";
// import { resolve4 } from 'dns';

export default {
  data() {
    return {
      telphone:null,
      SMS:null,
      name:null,
      username: null,
      password: null,
      vipPassword: null,
      pwdJ: "",
      errorMessage: { userInput: null, password: null },
      // btnDisable:true,
      Icon_logo_url: require("@/assets/Image/logo_02.png"),
      value: "123",
      showKeyboard: true,
      type: this.type,
      rightIcon: this.rightIcon
    };
  },
  //计算属性
  watch: {
    username() {
      var reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
      if (!reg.test(this.username)) {
        this.errorMessage.userInput = "格式不对";
        // this.btnDisable = false;
        return false;
      } else {
        this.errorMessage.userInput = "";
      }
    },
    //密码
    password() {
      //  const reg = /^\d+$/
      if (this.password == null || this.password == "") {
        this.btnDisable = true;
        //  this.errorMessage.password = '';
      }
      //  else
      //  if(!reg.test(this.password)){
      //    this.errorMessage.password = '密码由数字组成';
      //    return false;
      //  }
      //  if(this.username != null && this.password != null && reg.test(this.password)){
      //    this.errorMessage.password = '';
      //   //  this.btnDisable = false;
      //  }
    }
  },
  methods: {
    //点击
    onClick(name, title) {
      console.log(name);
      this.name = name;
      console.log(title);
    },
    //md5加密
    getmd5() {
      var a;
      var md5 = crypto.createHash("md5");
      md5.update("aaa");
      var a = md5.digest("hex");
      console.log(a);
      //47bce5c74f589f4867dbd57e9ca9f808
    },
    //保存
    save() {
      
      // this.pwdJ =   JSON.parse(sessionStorage.getItem('pwd'));
      // var reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
      //做非空判断

      if (this.username == null || this.password == null) {
        this.$toast("输入项不可为空");
        return false;
      }

      //做特殊字符验证
      // if( !reg.test(this.username) || !reg.test(this.username) ) {
      //      this.$toast("输入项格式不对");
      //      return false;
      // }else {

      //去空格
      console.log(this.name);
      
      if(this.name == 0){
          this.pwdJ = {
            vipCode: "",
            loginName: this.username,
            password: md5(md5(this.password)),
            vipPassword: md5(md5(this.password)),
            churchID: 1,
            mobbileNo:this.telphone,
            verif_Code:this.SMS
          };
      }else{
          this.pwdJ = {
            vipCode: null,
            loginName: null,
            password: null,
            vipPassword: null,
            churchID: 1,
            mobbileNo:this.telphone,//手机号码
            verif_Code:this.SMS //验证码
          };
      }
      console.log(this.pwdJ);
      
      this.$axios({
        method: "post",
        url: "/api/User/Login",
        data: this.pwdJ
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.code != 0) {
              this.$toast({
                duration: 800,
                message: "用户不存在"
              });
            }

            if (res.data.code == 0) {
              this.$toast({
                duration: 800,
                message: "登录成功"
              });

              console.log(res.data.data);
              sessionStorage.setItem("PWD", JSON.stringify(res.data.data));
              this.$router.push("./Home");
            }
          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 800,
                message: "登录接口请求报错，请联系管理员"
              });
            }
            // console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });

      // }
    },
    //登录
    resetPwa() {
      this.$router.push("./resetLogin");
    },
    //返回
    onClickLeft() {
      this.$router.push("/home");
    },

    //发送短信
    sendSMS(){
      // console.log(this.telphone);
      this.$axios({
        method: "get",
        url: "/api/User/GetMobbileNum",
        params: {
           mobbileno:this.telphone 
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.code != 0) {
              this.$toast({
                duration: 800,
                message: "用户不存在"
              });
            }
            if (res.data.code == 0) {
               console.log(res.data.data);
               this.SMS = res.data.data;
               // sessionStorage.setItem("PWD", JSON.stringify(res.data.data));
               // this.$router.push("./Home");
            }
          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 800,
                message: "登录接口请求报错，请联系管理员"
              });
            }
            // console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });

      
    },
    register(){
       this.$router.push("/register");
    }
    //sumbitBtn
    // sumbitBtn(){

    // }
  },
  created() {
    this.$emit("header", false);
    this.$emit("footer", false);
    this.name = 0 ;
    this.pwdJ = JSON.parse(sessionStorage.getItem("pwd"));
    if (this.pwdJ != null) {
      this.username = this.pwdJ.username;
      this.password = this.pwdJ.pwd;
    }
    this.type = "password";
    this.rightIcon = "closed-eye";
  }
};
</script>

<style lang="less" scoped>
.AddBtn {
  width: 100%;
  margin-top: 50px;
  height: 50px;
  letter-spacing: 10px;
}
.note-icon {
  text-align: center;
  margin-bottom: 50px;
}
.pwdF {
  text-align: center;
  font-family: auto;
  font-size: 12px;
  font-weight: normal;
  margin-top: 20px;
  color: cornflowerblue;
}
.iconlogo {
  width: 50%;
}
.note-footer {
  text-align: center;
  .CreateAccount{
    margin-top: 20px;
    letter-spacing: 10px;
  }
}
.head-title {
  margin-top: 50px;
}
.loginNote {
  display: block;
  font-size: 12px;
  margin-top: 50px;
  color: #0099cc;
}
.van-field {
  height: 70px;
  font-size: 18px;
}


</style>

